<template>
  <div class="side-menu">
    <el-menu router :default-active="activeMenu">
      <logo />
      <side-item v-for="menu in menuLists" :key="menu.path" :item="menu" />
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { RouteRecordRaw, useRoute, useRouter } from 'vue-router';
import SideItem from './components/side-item.vue';
import Logo from './components/logo.vue';

const router = useRouter();
const route = useRoute();
const menuLists: RouteRecordRaw[] | undefined =
  router.options.routes[0].children;

const activeMenu = route.path;
</script>

<style scoped lang="less">
.side-menu {
  .el-menu {
    height: calc(100vh - 16px);
  }
}
</style>
